<template>
  <div class="phone-management">
    <!-- 搜索|新增 -->
    <div class="set-parameters">
      <el-input
        v-model="phoneNum"
        class="device-wechat-id"
        size="small"
        placeholder="请输入手机号码"
        clearable
        minlength="6"
        maxlength="30"
        show-word-limit
      ></el-input>
      <el-select v-model="phoneState" size="small" placeholder="使用状态" filterable clearable>
        <el-option v-for="ols in onlineState" :key="ols.id" :label="ols.label" :value="ols.value"></el-option>
      </el-select>

      <el-button type="primary" size="small" @click="queryData">查询</el-button>

      <el-divider direction="vertical"></el-divider>

      <label class="chose-number" for="chosePhoneText">导入号码</label>
      <input v-show="false" id="chosePhoneText" type="file" accept="text/plain" @change="openFile($event)" />

      <p v-if="phonesList.length === 0" style="color: #999999; font-size: 12px">
        <a class="a_download" target="_blank" href="http://www.jjldkj.com/files/weixin/phones.txt" download>下载模板</a>
      </p>

      <template v-if="phonesList.length > 0">
        <span>共{{ phonesList.length }}个号码</span>
        <el-button type="primary" size="small" @click="uploadPhoneList">上传号码</el-button>
      </template>
    </div>

    <!-- 信息展示 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="phonenumber" label="手机号码" header-align="center" align="center"></el-table-column>
      <el-table-column label="创建时间" header-align="center" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime | timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否使用" header-align="center" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0" style="color: #67c23a" v-text="'已使用'"></span>
          <span v-else style="color: #f56c6c" v-text="'未使用'"></span>
        </template>
      </el-table-column>
      <el-table-column prop="task_result" label="执行结果" header-align="center" align="center"></el-table-column>

      <el-table-column label="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            style="background-color: #ff9f00; color: #ffffff"
            type="warning"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="pageNum"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryPhoneNumber, addPhoneNumber, modifyPhoneNumber, deletePhoneNumber } from '@/api/httpApiAdmin'

export default {
  name: 'PhoneNumber',
  data() {
    return {
      phoneState: '', // 是否使用
      phoneNum: '', // 手机号码
      onlineState: [
        {
          id: 'isonline0',
          value: 0,
          label: '已使用'
        },
        {
          id: 'isonline1',
          value: 1,
          label: '未使用'
        }
      ], // 微信在线状态列表
      pageNum: 1, // 第几页
      pageSize: 20, // 每页几个数据
      tableData: [], // 号码列表
      total: 0, // 总数
      phonesList: [] // 要上传的号码列表
    }
  },
  computed: {
    ...mapState({
      adminInfo: 'adminInfo'
    })
  },
  mounted() {
    this.queryData()
  },
  methods: {
    // 分页查询数据
    queryData() {
      queryPhoneNumber(this.adminInfo.cid, this.phoneState, this.phoneNum, this.pageNum, this.pageSize).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.rows
          this.total = res.data.records || 0
        }
      })
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.pageSize === val) return
      this.pageSize = val
      this.queryData()
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.pageNum = val
      this.queryData()
    },
    // 解析txt
    openFile(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      if (file) {
        reader.readAsText(file)
        reader.onload = (evt) => {
          // 读取完文件之后会回来这里
          const fileString = evt.target.result // 读取文件内容
          this.phonesList = fileString.split(/\r\n|\n/)
        }
      } else {
        this.phones = []
      }
    },
    // 上传号码
    uploadPhoneList() {
      if (this.phonesList.length === 0) {
        this.$alert('号码不能为空！', '提示', { type: 'warning' })
        return
      }
      this.$confirm('确认上传号码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          addPhoneNumber(this.adminInfo.cid, this.phonesList).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '号码上传成功！',
                duration: 1000
              })
            }
            this.phonesList = []
            this.queryData()
          })
        })
        .catch(() => {})
    },
    // 显示编辑dialog
    handleEdit(index, row) {
      this.$prompt('请输入号码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入新号码',
        inputValue: row.phonenumber,
        inputPattern: /^[0-9a-zA-Z_]{6,20}$/,
        inputErrorMessage: '号码格式不正确'
      })
        .then(({ value }) => {
          modifyPhoneNumber(row.id, value, row.state).then((res) => {
            if (res.code === 0) {
              this.queryData()
            }
          })
        })
        .catch(() => {})
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm('确认删除手机号码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletePhoneNumber(row.id).then((res) => {
            if (res.code === 0) {
              this.tableData.splice(index, 1)
              this.total = this.total - 1
              const pn = Math.ceil(this.total / this.pageSize)
              if (this.pageNum > pn) {
                this.pageNum = pn
              }
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-management {
  height: 100%;
  display: flex;
  flex-direction: column;

  .set-parameters {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    border-bottom: solid $border-color-1 2px;
    .el-button,
    .wechat-id-input,
    .el-select {
      margin-left: 20px;
    }
    ::v-deep .device-wechat-id {
      width: 220px;
      .el-input__inner {
        width: 220px;
      }
    }
    .chose-number {
      margin-right: 10px;
      cursor: pointer;
      background: #409eff;
      border-color: #409eff;
      color: #fff;
      font-size: 12px;
      padding: 9px 15px;
      border-radius: 4px;
      &:hover {
        background: #66b1ff;
        border-color: #66b1ff;
      }
    }
  }

  .el-pagination {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: solid 1px $border-color-1;
    background-color: white;
  }
}
</style>
